<template>
    <div class="ym">
        <div class="main">
            <img class="topicimg" src="@/assets/img/picture/biao_xi.png" alt="">
            <div class="maincontent">
              <div class="bywrite">
                <div class="userlog">用户登录</div>
                <div class="inputbox number" :class="errPhone?'err':''">
                    <img class="symbol" src="@/assets/img/icon/login_phone.png" alt="">
                    <input v-model="loginData.username" placeholder="账号" type="text">
                    <div class="errone" v-if="errPhone">请输入账号</div>
                </div>
                <div class="yzmbox" :class="nullYzm?'err':''">
                    <input placeholder="请输入右边图片的答案" v-model="loginData.code" type="text">
                    <img @click="changeYzm" class="yzmcode" :src="yzmSrc" alt="">
                </div>
                <div class="inputbox" :class="errAll?'err':''">
                    <img class="symbol" src="@/assets/img/icon/login_suo.png" alt="">
                    <input @keydown.enter="login" v-model="loginData.password" class="password" placeholder="密码" :type="ispassword?'password':'text'">
                    <div class="rule">
                        <img class="eye" @click="showPassword(0)" v-if="ispassword" src="@/assets/img/icon/login_closeEye.png" alt="">
                        <img class="eye" @click="showPassword(1)" v-else src="@/assets/img/icon/login_openEye.png" alt="">
                    </div>
                    <div v-if="errAll" class="errtwo">密码错误</div>
                    <div v-if="errPass" class="errtwo">请输入密码</div>
                </div>
                <button @click="login" class="logon">登录</button>
                <div class="twochoose">
                    <a @click="zc" class="zc">新用户注册</a>
                    <a @click="yzmlog" class="yzm">忘记密码</a>
                </div>
              </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.ym{
    height: 100vh;
    //background-color: #F2F4F7;
    background-image: url('@/assets/img/picture/background.jpg');
    background-size: 100% 100% ;
    display: grid;
    align-items: center;
    justify-content: right;
    
    .main{
        width: fit-content;
        margin-right: 150px;
        .topicimg{
          height: 90px;
          width: 75%;
          display: block;
          margin: 0 auto 30px;
        }
        .maincontent{
          background-color: white;
          border-radius: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          opacity: 0.9;
          .bywrite{
            width: 450px;
            padding: 50px 50px 50px;
            position: relative;
            .yzmbox{
              display: flex;
              height: 48px;
              margin-bottom: 24px;
              border: 1px solid #d4d6d9;
              border-radius: 24px;
              align-items: center;
              input{
                  padding: 0 24px;
                  height: 100%;
                  flex: 1;
                  border-radius: 24px;
              }
              .yzmcode{
                  padding-left: 10px;
                  margin-right: 20px;
                  width: 96px;
                  height: 38px;
              }
              &:hover{
                  border: 1px solid #3A8BFF;
              }
              &:focus-within{
                border: 1px solid rgb(30, 166, 234);
              }
            }
            .userlog{
                font-size: 20px;
                font-weight: normal;
                margin-bottom: 20px;
            }
            .inputbox{
                position: relative;
                width: 100%;
                height: 50px;
                border-radius: 25px;
                border: 1px solid #d4d6d9;
                display: flex;
                line-height: 50px;
                text-align: center;
                &:hover{
                  border: 1px solid rgb(30, 166, 234);
                }
                input{
                    width: 100%;
                    height: 50px;
                    padding-left: 54px;
                    flex: 1;
                    background-color: transparent;
                }
                input::placeholder{
                    color: #91A0B5;
                }
                .password{
                    padding-right: 50px;
                }
                .symbol{
                    position: absolute;
                    height: 47px;
                    left: 20px;
                }
                .rule{
                    display: flex;
                    justify-items: center;
                    align-items: center;
                    .eye{
                        width: 18px;
                        height: 18px;
                        right: 20px;
                        position: absolute;
                    }
                }
                .errtwo{
                    font-size: 12px;
                    color: #FF5152;
                    margin-top: 6px;
                    text-align: left;
                    position: absolute;
                    top: 35px;
                    left: 25px;
                }
            }
            .err{
                border: 1px solid #FF5152!important;
            }
            .inputbox:focus-within {
                border: 1px solid rgb(30, 166, 234);
            }
            .number{
                padding-right: 24px;
                margin-bottom: 24px;
                .errone{
                    font-size: 12px;
                    color: #FF5152;
                    margin-top: 6px;
                    text-align: left;
                    position: absolute;
                    top: 30px;
                    left: 25px;
                }
            }
            .logon{
                width: 100%;
                height: 50px;
                border-radius: 25px;
                background: linear-gradient(to right,rgb(125, 162, 246),rgb(70, 131, 237));
                margin: 40px 0 24px 0;
                color: white;
                font-size: 18px;
                box-shadow: 0 3px 12px 0 rgba(39, 125, 255, 0.3);
            }
            .twochoose{
                color: #3A8BFF;
                font-size: 14px;
                padding: 0 24px;
                .yzm{
                    float: right;
                }
            }
          }
        }
        
    }
}
</style>

<script>
import { apiGet, apiPost } from '@/assets/js/api'
import { mapActions } from 'vuex'
export default {
  data () {
    return {
      phoneNumber: '',
      passWord: '',
      ispassword: true,
      errAll: false,
      errPhone: false,
      errPass: false,
      nullYzm: false,
      yzmSrc: '',
      loginData: {
        username: '',
        password: '',
        code: '',
        uuid: ''
      }
    }
  },
  methods: {
    ...mapActions('LocalData', ['getUserData', 'getSelectList_X']),
    changeYzm(){
      apiGet('/captchaImage').then(res => {
        // 解码 Base64 内容
        const binaryString = atob(res.img);
        const length = binaryString.length;
        const bytes = new Uint8Array(length);
        
        // 将每个字符转换为字节
        for (let i = 0; i < length; i++) {
            bytes[i] = binaryString.charCodeAt(i);
        }
        
        // 创建一个 Blob 对象
        const blob = new Blob([bytes], { type: "image/png" }); // 根据实际图片类型修改
        const imageUrl = URL.createObjectURL(blob);
        this.yzmSrc = imageUrl;
        this.loginData.uuid = res.uuid
      }).catch(err => {
        console.log(err);
      })
    },
    showPassword (index) {
      if (index === 1) {
        this.ispassword = true
      } else {
        this.ispassword = false
      }
    },
    login () {
      if (this.loginData.username === '') {
        this.errPhone = true
        this.errPass = false
        this.errAll = false
      } else if (this.loginData.password === '') {
        this.errPass = true
        this.errPhone = false
        this.errAll = false
      } else {
        this.loginData.code = parseFloat(this.loginData.code)
        apiPost('/login', this.loginData).then(res => {
          if (res.code === 200) {
            localStorage.setItem('token', res.token)
            this.$router.push('/index')
            // this.$router.push('/country?id=18')
          } else {
            this.errAll = true
            this.changeYzm()
          }
        })
      }
    },
    service () {
      this.$router.push('/service')
    },
    zc () {
      this.$router.push('/register')
    },
    yzmlog () {
      this.$router.push('/forgetpasswd')
    },
    otherlog () {
      this.$router.push('/otherlog')
    },
  },
  beforeMount () {
    if (this.yzmSrc === '') {
      this.changeYzm()
    }
  },
  mounted () {
    if (this.$route.query.phoneNumber) {
      this.phoneNumber = this.$route.query.phoneNumber;
    }
  }
}
</script>
